import React, { memo, useEffect, useState, useRef } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { useRouteMatch } from "react-router-dom";
import { getallblogactionasync } from "../../store/actioncreater";
import { Blogdetailwrap } from "./style";
import { current } from "@/utils/timeutil";
// import { changescroll } from "@/utils/scrollani";
import request from "@/service/request";
import qs from "qs";
import { message } from "antd";
export default memo(function Blogdetail() {
  const match = useRouteMatch();
  const dispatch = useDispatch();
  const content1ref = useRef();
  const pinshowref = useRef();
  //评论输入框
  const pinref = useRef();
  const id = match.params.id;

  const [detail, setDetail] = useState("");
  const [pinlist, setPinlist] = useState([]);
  //判断当前文章是否收藏
  const [shoucang, setShoucang] = useState(false);
  const { user } = useSelector(
    (store) => ({
      user: store.userstore.user,
    }),
    shallowEqual
  );

  //点赞或者踩
  const adddianzan = (id, w) => {
    request
      .get(`travel/Adddianzan?id=${id}&w=${w}`)
      .then(() => {
        request.get(`travel/Getcomment?id=${detail.bgid}`).then((value) => {
          setPinlist(value);
          content1ref.current.scrollTo(0, 0);
        });
      })
      .catch((err) => {
        console.log("点赞接口出错");
      });
  };
  //获取评论
  useEffect(() => {
    request.get(`travel/Getcomment?id=${detail.bgid}`).then((value) => {
      console.log(value);
      setPinlist(value);
    });
  }, [detail]);

  //判断评论是否收藏
  useEffect(() => {
    request
      .get(`travel/Ifcollection?bgid=${id}&bloggerid=${user.id}`)
      .then((value) => {
        setShoucang(value);
      });
  }, [user, id]);
  useEffect(() => {
    request
      .get(`travel/Blogdetail?id=${id}`)
      .then((res) => {
        setDetail(res);
      })
      .catch((value) => {
        console.log("获取博客详情接口出错");
      });
    request
      .get(`travel/addclick?id=${id}`)
      .then((res) => {
        dispatch(getallblogactionasync(-1));
      })
      .catch((value) => {
        console.log("点击接口出错");
      });
  }, [id, dispatch]);
  //发表评论
  const pubpin = () => {
    const p = {};
    p.content = pinref.current.value;
    p.commentDate = current();
    p.dianzan = 0;
    p.biandi = 0;
    p.bloggerid = user.id;
    p.blogid = id;
    console.log(p);
    if (user.pubcom) {
      // console.log(qs.stringify(p));
      request
        .post("travel/Addcomment", qs.stringify(p))
        .then((value) => {})
        .then((res) => {
          request.get(`travel/Getcomment?id=${detail.bgid}`).then((value) => {
            setPinlist(value);
            pinref.current.value = "";
            content1ref.current.scrollTo(0, 0);
          });
        })
        .catch((err) => {
          console.log("发表评论接口出错");
        });
    } else {
      message.error("你不能发表评论");
    }
  };
  //加入收藏
  const addcollection = () => {
    request
      .get(`travel/Addcollention?bgid=${id}&bloggerid=${user.id}`)
      .then(() => {
        if (!shoucang) {
          message.success({
            content: "收藏成功",
          });
        } else {
          message.success({
            content: "取消收藏成功",
          });
        }
        setShoucang(!shoucang);
      });
    request
      .get(`travel/Ifcollection?bgid=${id}&bloggerid=${user.id}`)
      .then((value) => {
        setShoucang(value);
      });
  };
  return (
    <Blogdetailwrap>
      <div className="alltitle">您当前的位置:唯美语录</div>
      <div className="content1">
        <div className="title">{detail.title}</div>
        <div className="headerbox">
          {!shoucang ? (
            <span
              className="iconfont icon-shoucang"
              onClick={(e) => addcollection()}
            ></span>
          ) : (
            <span
              className="iconfont icon-shoucang-yishoucang"
              onClick={(e) => addcollection()}
            ></span>
          )}
          <span>发布时间：{detail.releaseDate}</span>
          <span>点击：{detail.clickHit}</span>
          <span>作者：{detail.nickName}</span>
        </div>
        <img src={detail.pic} alt="" />
        <div className="summary">{detail.summary}</div>
      </div>
      <div className="pinshow" ref={pinshowref}>
        <div className="title"></div>
        <div className="content1" ref={content1ref}>
          {pinlist.length > 0 &&
            pinlist.map((item, index) => {
              return (
                <div className="item" key={index} id={"itemid" + index}>
                  <img src={item.aventer} alt="" />
                  <div className="box">{item.content.slice(0, 10) + ".."}</div>
                  <div className="dianzan">
                    <span
                      className="iconfont icon-dianzan"
                      onClick={(e) => adddianzan(item.tcid, -1)}
                    ></span>
                    <span>{item.dianzan}</span>
                    <span
                      className="iconfont icon-cai"
                      onClick={(e) => adddianzan(item.tcid, -2)}
                    ></span>
                    <span>{item.biandi}</span>
                  </div>
                </div>
              );
            })}
        </div>
      </div>
      <div className="pubpin">
        <div className="title">随便说点什么把!</div>
        <div className="content1">
          <img src={user.aventer} alt="" />
          <div className="nickname">{user.nickname}</div>
          <textarea
            ref={pinref}
            placeholder="一起来吐槽点神马，盖点楼把"
            name="pinglun"
            id=""
            cols="30"
            rows="10"
          ></textarea>
          <div className="radi"></div>
          <div className="oneborder"></div>
          <button onClick={pubpin}></button>
        </div>
      </div>
    </Blogdetailwrap>
  );
});
